<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>龙陌的博客</title>
    <meta name="description" content="基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/long-press/assets/style.BL65bImA.css" as="style">
    
    <script type="module" src="/long-press/assets/app.CKtEL6mi.js"></script>
    <link rel="preload" href="/long-press/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/long-press/assets/chunks/framework.Cp_of1Ge.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/theme.hH2tFlJ7.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/PageInfo.vue_vue_type_script_setup_true_lang.9LRWY4ho.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/dayjs.min.BrPrGVY0.js">
    <link rel="modulepreload" href="/long-press/assets/css3_现代web布局_11.md.B10tI7m_.lean.js">
    <link rel="icon" type="image/svg+xml" href="logo.ico">
    <meta name="author" content="龙陌">
    <meta name="referrer" content="no-referrer">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-4c760b95><!--[--><!--]--><!--[--><span tabindex="-1" data-v-16c53dd7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-16c53dd7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-4c760b95 data-v-0a463f3f><div class="VPNavBar has-sidebar top" data-v-0a463f3f data-v-460dba10><div class="wrapper" data-v-460dba10><div class="container" data-v-460dba10><div class="title" data-v-460dba10><div class="VPNavBarTitle has-sidebar" data-v-460dba10 data-v-ef777607><a class="title" href="/long-press/" data-v-ef777607><!--[--><!--]--><!--[--><img class="VPImage logo" src="/long-press/logo.ico" alt data-v-9cb742f0><!--]--><span data-v-ef777607>龙陌的博客</span><!--[--><!--]--></a></div></div><div class="content" data-v-460dba10><div class="content-body" data-v-460dba10><!--[--><!--]--><div class="VPNavBarSearch search" data-v-460dba10><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-460dba10 data-v-b298d4fd><span id="main-nav-aria-label" class="visually-hidden" data-v-b298d4fd>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💻 首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/guide/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💡 指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/tools/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 编程工具</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/utils/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 常用工具类</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/standard/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>📋 前端规范</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/react/React实战,设计模式与最佳实践/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ React</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/typescript/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ TypeScript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/css3/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Css3</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/electron/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Electron</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/linux/linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Linux</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-460dba10 data-v-815abbf3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-815abbf3 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-460dba10 data-v-a0947e71 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-460dba10 data-v-b81df352 data-v-603fa601><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-603fa601><span class="vpi-more-horizontal icon" data-v-603fa601></span></button><div class="menu" data-v-603fa601><div class="VPMenu" data-v-603fa601 data-v-61aada2f><!----><!--[--><!--[--><!----><div class="group" data-v-b81df352><div class="item appearance" data-v-b81df352><p class="label" data-v-b81df352>外观</p><div class="appearance-action" data-v-b81df352><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-b81df352 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div></div></div><div class="group" data-v-b81df352><div class="item social-links" data-v-b81df352><div class="VPSocialLinks social-links-list" data-v-b81df352 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-460dba10 data-v-156ee799><span class="container" data-v-156ee799><span class="top" data-v-156ee799></span><span class="middle" data-v-156ee799></span><span class="bottom" data-v-156ee799></span></span></button></div></div></div></div><div class="divider" data-v-460dba10><div class="divider-line" data-v-460dba10></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-4c760b95 data-v-bc5dff2d><div class="container" data-v-bc5dff2d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-bc5dff2d><span class="vpi-align-left menu-icon" data-v-bc5dff2d></span><span class="menu-text" data-v-bc5dff2d>归档</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-bc5dff2d data-v-fe28bfa1><button data-v-fe28bfa1>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-4c760b95 data-v-e1756f1c><div class="curtain" data-v-e1756f1c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e1756f1c><span class="visually-hidden" id="sidebar-aria-label" data-v-e1756f1c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>现代web布局</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/01" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Web 布局技术演进：了解 Web 布局发展史</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/02" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>现代 Web 布局技术术语</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/03" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局基础使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/04" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的对齐方式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/05" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex 属性的基础运用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/06" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/07" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/08" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/09" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>使用 Flexbox 构建经典布局：10 种经典 Web 布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/10" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>10</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>postcss</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/postcss/postcss-prefix-selector%E5%A2%9E%E5%8A%A0%E7%BB%9F%E4%B8%80%E4%BD%9C%E7%94%A8%E5%9F%9F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>postcss-prefix-selector增加统一作用域</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-4c760b95 data-v-308553a0><div class="VPDoc has-sidebar has-aside" data-v-308553a0 data-v-e512d8d8><!--[--><!--]--><div class="container" data-v-e512d8d8><div class="aside" data-v-e512d8d8><div class="aside-curtain" data-v-e512d8d8></div><div class="aside-container" data-v-e512d8d8><div class="aside-content" data-v-e512d8d8><div class="VPDocAside" data-v-e512d8d8 data-v-bca3b04c><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-bca3b04c data-v-ff0b6666><div class="content" data-v-ff0b6666><div class="outline-marker" data-v-ff0b6666></div><div class="outline-title" role="heading" aria-level="2" data-v-ff0b6666>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0b6666><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0b6666> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ff0b6666 data-v-69d389fc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-bca3b04c></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e512d8d8><div class="content-container" data-v-e512d8d8><!--[--><!--]--><main class="main" data-v-e512d8d8><div style="position:relative;" class="vp-doc _long-press_css3_%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80_11" data-v-e512d8d8><div><p>既然要使用 CSS 网格布局来构建 Web 布局，那就要先从如何定义一个网格开始，再到如何定义一个符合 Web 布局的网格。也就是说，定义一个网格主要包含两个事情，即 <strong>定义一个网格</strong> 和 <strong>设置网格大小</strong> 。而这两件事情使用几个 CSS 属性就可以完成，只不过这些属性深藏着很多不同的使用方式，而且带来的作用和灵活性都会不同。</p><p>那么我们先从定义网格开始！</p><h2 id="定义网格的类型" tabindex="-1">定义网格的类型 <a class="header-anchor" href="#定义网格的类型" aria-label="Permalink to &quot;定义网格的类型&quot;">​</a></h2><p>CSS 中定义一个网格非常简单，只需要在一个元素上显式设置 <code>display</code> 的值为 <code>grid</code> 或 <code>inline-grid</code> 即可。比如：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 或 inline-grid */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>只不过这是一个最基础的网格，一个 “单列多行”的网格，而且行数由网格容器的子元素（包括其伪元素和文本节点）来决定：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17c85edabf4142409a07bc2dfcbf0bcb~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/yLjRzOd" target="_blank" rel="noreferrer">https://codepen.io/airen/full/yLjRzOd</a></p></blockquote><p>默认的网格往往不能满足我们所需，也就是说，要构建一个符合要求的网格，还需要依赖其他的一些属性，比如 <code>grid-template-*</code> （即 <code>grid-template-rows</code> 、<code>grid-template-columns</code> 和 <code>grid-template-areas</code> 以及它们的简写属性 <code>grid-template</code>），或 <code>grid-auto-*</code> （即 <code>grid-auto-rows</code> 、<code>grid-auto-columns</code> 和 <code>grid-auto-flow</code>）。根据不同的属性定义的网格又分为 <strong>显式网格</strong> 和 <strong>隐式网格</strong> ：</p><ul><li><code>grid-template-*</code> 属性定义的网格是一个显式网格；</li><li><code>grid-auto-*</code> 属性定义的网格是一个隐式网格。</li></ul><h2 id="使用-grid-template-columns-和-grid-template-rows-定义网格" tabindex="-1">使用 grid-template-columns 和 grid-template-rows 定义网格 <a class="header-anchor" href="#使用-grid-template-columns-和-grid-template-rows-定义网格" aria-label="Permalink to &quot;使用 grid-template-columns 和 grid-template-rows  定义网格&quot;">​</a></h2><p>我们先从定义一个显式网格开始，即先从 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 两个属性着手。你可以在网格容器上使用 <code>grid-template-rows</code> 和 <code>grid-template-columns</code> 属性来定义网格的行和列（即网格轨道），它们都接受 <strong>用空格分隔开来的多个数值</strong> ，这些值同时代表网格轨道的大小，而且数值之间的空格代表网格线。</p><p>比如，我们在一个网格容器上显示设置了 <code>grid-template-columns</code> 属性的值是 <code>180px 20% auto 1fr 10vw</code> ，即：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 或 inline-grid */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">180</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> auto</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>它将会告诉浏览器，定义了一个五列 N 行的网格，即将网格容器分成五列（沿网格容器内联轴 Inline Axis 方向），而且每列的列宽分别是 <code>180px</code> 、 <code>20%</code> 、 <code>auto</code> 、<code>1fr</code> 和 <code>10vw</code> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db55fe969b2149648556900c2e973ba5~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如你所见，<code>grid-template-columns</code> 属性的值可以是各种不同类型的长度值，比如以 <code>px</code> 为单位的固定值，以 <code>%</code> 、<code>vw</code> 为单位的相对值，还有像 <code>auto</code> 这样的关键词以及网格布局中独有的单位 <code>fr</code> 等。除此之外还可以是 CSS 的一些函数，比如 <code>min()</code> 、<code>minmax()</code> 等。</p><p>也就是说，可用于 <code>grid-template-columns</code> 的值类型大致可分为三种：</p><ul><li>带有不同单位的长度值，比如 <code>px</code> 、<code>em</code> 、<code>rem</code> 、<code>vw</code> 、<code>vh</code> 、<code>%</code> 、<code>ch</code> 、<code>ex</code> 和 <code>fr</code> 等；</li><li>关键词，比如 <code>none</code> 、<code>auto</code> 、<code>min``-content</code> 和 <code>max-content</code> 等；</li><li>CSS 函数，比如 <code>min()</code> 、<code>max()</code> 、<code>clamp()</code> 、<code>clac()</code> 、<code>fit-content()</code> 、<code>minmax()</code> 和 <code>repeat()</code> 等。</li></ul><blockquote><p>注意，其中有些类型值会涉及到网格布局中的计算，那么这部分将会单独放到一节课程中来介绍！</p></blockquote><p>你也看到了，默认情况下，<code>grid-tempate-columns</code> 会根据值的数量来创建相应数量的列网格轨道，即使在没有相应数量的网格项目存在时，也一样会构建 <code>grid-tempate-columns</code> 属性指定的列数。比如上面的示例，如果网格容器中只有四个网格项目时，<code>grid-template-columns: 180px 20% auto 1fr 10vw</code> 同样会创建一个五列的网格，只不过最后一列是空的，因为没有相应的网格项目自动放置：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6f0a43c7a1c407ab75b3bbb37c0dc63~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>当然，如果我们网格容器的直接子元素（网格项目）超过了 <code>grid-template-columns</code> 值的数量时，默认情况下，会新增一个行网格轨道。比如 <code>grid-template-columns: 180px 20% auto 1fr 10vw</code> 碰到六个网格项目时，它会创建一个五列两行的网格：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/277c7243c88a4710aa6aaf5b8a269f3c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>依此类推，最终你可能创建的是一个 <code> 5 x N</code> 的网格（<code>N</code> 是行网格轨道数量）:</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d86190894c934b82bd9ba9ee1cfbb632~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/XWqxeyN" target="_blank" rel="noreferrer">https://codepen.io/airen/full/XWqxeyN</a></p></blockquote><p>上面这个示例中并没有显式使用 <code>grid-template-rows</code> 来指定行网格轨道尺寸，此时将会采用默认值 <code>auto</code> ，即可根据内容来决定网格行轨道的尺寸。当然，你也可以像使用 <code>grid-template-columns</code> 那样来使用 <code>grid-template-rows</code> ，即显示给网格定义行轨道的数量和尺寸：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">180</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> auto</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vh</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>此时，<code>grid-template-columns</code> 和 <code>grid-template-rows</code> 一起构建了一个 <code>5 x 3</code> （五列三行）的网格（即使网格容器中没有<code>15</code> 个网格项目存在）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d0b5afd9bbc421b891cd2ba9007bef0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/ZEoqwEN" target="_blank" rel="noreferrer">https://codepen.io/airen/full/ZEoqwEN</a></p></blockquote><p>同样的，当网格项目超过 <code>grid-template-rows</code> 和 <code>grid-template-columns</code> 构建的网格单元格数量时，将会重新创建一个行网格轨道，并且以 <code>auto</code> 来计算行网格轨道尺寸。</p><p>从这两个示例中不难发现：</p><ul><li>如果仅使用 <code>grid-template-columns</code> 属性来定义一个网格时，那么默认情况会创建一个<strong>一行单列（或多列）</strong> 的网格，即 <code>N x 1</code> ，其中 <code>N</code> 对应的是 <code>grid-template-columns</code> 属性值的数量。当网格项目的数量超过 <code>N</code> 时，会自动创建新的行网格轨道。</li><li>如果同时使用 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 属性来定义一个网格时，那么默认创建一个 <code>M x N</code> 的网格，其中 <code>M</code> 对应的是 <code>grid-template-rows</code> 属性值的数量，<code>N</code> 对应的是 <code>grid-template-columns</code> 属性值的数量。当网格项目的数量超过 <code>M x N</code> 时，会自动创建新的行网格轨道。</li><li>如果仅使用 <code>grid-template-rows</code> 属性来定义一个网格时，那么默认情况会创建一个<strong>一行（或多行）单列</strong> 的网格，即 <code>M x 1</code> ，其中 <code>M</code> 对应的是 <code>grid-template-rows</code> 属性值的数量。当网格项目的数量超过 <code>M</code> 时，会自动创建新的行网格轨道。</li></ul><p>不过要注意的是，只有 <code>grid-template-rows</code> 和（或）<code>grid-template-columns</code> 属性值定义的网格才是一个显式网格，比如 <code>M x N</code> ，其中 <code>M</code> 是 <code>grid-template-rows</code> 属性值的数量，<code>N</code> 是 <code>grid-template-columns</code> 属性值的数量。如果因网格项目数量总和超过 <code>M x N</code> 而自动新创建行网格轨道，则会被称为是隐式网格。</p><blockquote><p>多出的网格项目自动创建新的行网格轨道，主要原因是 <code>grid-auto-flow</code> 默认的值为 <code>row</code> ，而且网格项目自动放置的算法会首先根据 <code>grid-auto-flow</code> 属性值来决定流动的方向。有关于这方面的详细介绍，稍后会阐述！</p></blockquote><p>当你使用 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 来创建一个网格时，它们主要做了三件事：</p><ul><li>定义了网格线；</li><li>定义了网格轨道数量；</li><li>定义了网格轨道尺寸。</li></ul><p><code>grid-template-rows</code> 和 <code>grid-template-columns</code> 相当于：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">列网格线1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">列网格轨道1尺寸</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">列网格线2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">列网格轨道2尺寸</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [...] [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">列网格轨道N的尺寸</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [列网格线N+1]</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">行网格线1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">行网格轨道1尺寸</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">行网格线2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">行网格轨道2尺寸</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [...] [</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">行网格道M的尺寸</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] [行网格线M+1]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">180</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">em</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">em</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vh</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd1430c677f34753898cdf963e34f034~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如上图所示，<code>grid-template-columns</code> 和 <code>grid-template-rows</code> 创建的网格线默认是以数字进行索引的：</p><ul><li><code>grid-template-columns</code> 创建的列网格线，它从左往右是从 <code>1</code> 到 <code>N+1</code> 进行索引（比如上图中的 <code>1 ~ 6</code>）；从右往左是从 <code>-1</code> 到 <code>-(N+1)</code> 进行索引（比如上图中的 <code>-1 ~ -6</code>）。</li><li><code>grid-template-rows</code> 创建的行网格线，它从上往下是从 <code>1</code> 到 <code>M + 1</code> 进行索引（比如上图中的 <code>1 ~ 4</code>），从下往上是从 <code>-1</code> 到 <code>-(M+1)</code> 进行索（比如上图中的 <code>-1 ~ -4</code>）。</li></ul><blockquote><p>注意，它们也会受 CSS 的书写模式和阅读模式的影响。为了节省篇幅，这里不做详细阐述！</p></blockquote><p>既然默认是数字命名网格线名称，换句话说，就可以显式给网格线命名。你可以在 <code>grid-template-rows</code> 和 <code>grid-template-columns</code> 属性中定义网格轨道时给网格线命名。显式命名网格线名称时，网格线名称需要放置在中括号里（<code>[]</code>），即 <code>[line-name]</code> 。比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">grid-template-columns: [列网格线1] [列网格轨道1尺寸] [列网格线2] [列网格轨道2尺寸] [...] [列网格轨道N的尺寸] [列网格线N+1]</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">grid-template-rows: [行网格线1] [行网格轨道1尺寸] [行网格线2] [行网格轨道2尺寸] [...] [行网格道M的尺寸] [行网格线M+1]</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">*/</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: [col1] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">180</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [col2] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [col3] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">em</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [col4] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [col5] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [col6];</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: [row1] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">em</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [row2] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [row3] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vh</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [row4];</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>这样会在默认的网格线索引号上新增已命名的网格线名称：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8670c4623494f29b0b10fdf2a7189db~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/rNvqRaj" target="_blank" rel="noreferrer">https://codepen.io/airen/full/rNvqRaj</a></p></blockquote><p>注意，它们是相互叠加的关系，并不是相互替换的关系。</p><p>从前面的课程中可以得知，在网格容器中设置 <code>gap</code> 属性时，可以给网格轨道之间设置间距。如果你使用浏览器调试工具查看带有 <code>gap</code> 设置的网格时，你会发现相邻两个网格轨道有两条线网格线存在。很多初学者会误认为这是两条网格线，其实它就是一条网格线：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa9cc6095dca41e9b412f1b253150b5f~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>但是我们可以换一种思路来理解，它可以是两条网格线，只不过前者是以 <code>-end</code> 命名的网格线，后者是 <code>-start</code> 命名的网格线：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc3944f7331f4f1cb87fa074bfa849c6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>因此，你可以以 <code>-end</code> 和 <code>-start</code> 给同一条网格线命名：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: [列网格线1 </span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">列网格线1-start</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] 列网格轨道1的尺寸 [列网格线1-end </span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">列网格线2-start</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] 列网格轨道2尺寸 [列网格线2-end </span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">列网格线N-start</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] 列网格轨道N的尺寸 [列网格线N-end 列网格线(N+1)</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">-start</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">]</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-row</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: [行网格线1 </span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">行网格线1-start</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] 行网格轨道1的尺寸 [行网格线1-end </span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">行网格线2-start</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] 行网格轨道2尺寸 [行网格线2-end </span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">行网格线M-start</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">] 行网格轨道M的尺寸 [行网格线M-end 行网格线(M+1)</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">-start</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>来看一个具体的示例：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [col1 col1-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">180</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [col1-end col2 col2-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [col2-end col3 col3-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">em</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [col3-end col4 col4-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [col4-end col5 col5-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [col5-end col6 col6-start];</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [row1 row1-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">em</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [row1-end row2 row2-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [row2-end row3 row3-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vh</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [row3-end row4 row4-start];</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f199517e24f74c6cb4f3ac18fb431f13~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/oNdaVVV" target="_blank" rel="noreferrer">https://codepen.io/airen/full/oNdaVVV</a></p></blockquote><p>你可以在 <code>[]</code> 中放置任意数量的网格线名称，但它们之间需要用<strong>空格</strong>隔开。不过在给网格线命名的时候，建议你尽可能使用具有语义化名称，更利于多人协作开发。更有意思的是，你还可以使用表情符（<strong>Emoji</strong> ）或 HTML 的实体符来命名，比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">     [aside-start 👉] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">     [🤜 aside-end main-start 👐] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">     [🤛 main-end sidebar-start 🤲] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">     [👈 sidebar-end];</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: [👆] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [🖐️] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [🤘] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [👇];</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1460f476b00a4048acaf3c23cc2efe99~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/PoexZPN" target="_blank" rel="noreferrer">https://codepen.io/airen/full/PoexZPN</a></p></blockquote><p>在给网格线显式命名时，除了给网格线定义一个具有语义化的名称之外，还应该避免使用 CSS 的关键词给其命名，尤其是 <code>span</code> 、<code>auto</code> 、<code>inherit</code> 、<code>initial</code> 、<code>unset</code> 、<code>all</code> 、<code>revert</code> 等。因为使用这些关键词给网格线命名会令 <code>grid-template-rows</code> 和 <code>grid-template-columns</code> 属性失效。</p><p>我想你肯定会好奇，使用 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 属性定义一个网格时，就自动创建了数字索引的网格线名称了，为什么还需要显式给网格线命名呢？这里简单说一下。</p><p>CSS 网格布局中，使用 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 属性定义好一个网格时，它的子元素（网格项目）默认情况之下<strong>只会按照自动放置算法来放置网格项目</strong> ，即按照 HTML 文档源顺序在网格中从第一个网格单元格开始放置，从左往向，从上往下依次放置（书写顺序和阅读模式为 <code>ltr</code> 情况下）。</p><p>但要真正构建一个符合需求的 Web 布局时，还需要通过 <code>grid-column</code> 、<code>grid-row</code> 或 <code>grid-area</code> 属性来指定网格项目放置在什么位置。而且这几个属性都是根据网格线的名称来指定网格项目放置在哪，如此一来，要是没有给网格线显式命名，我们只能使用数字索引编号的网格线名称，比如：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><p>你将看到的效果如下：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/909866500c784ae7930ec67c0cb19743~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>这已经是我们常见的一种 Web 布局了（三列布局）。如果显式给网格线命名了呢？</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [header-start nav-start footer-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [nav-end main-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [main-end aside-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [aside-end header-end footer-end];</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [header-start] </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [header-end nav-start main-start aside-start] </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [nav-end main-end aside-end footer-start] </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        [footer-end];</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: header-start / header-end;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: header-start / header-end;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: nav-start / nav-end;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: nav-start / nav-end;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: main-start / main-end;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: main-start / main-end;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: aside-start / aside-end;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: aside-start / aside-end;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: footer-start / footer-end;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: footer-start / footer-end;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><p>这样一来，你甚至可以使用 <code>grid-area</code> 来指定网格项目的位置：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: header;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: main;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: nav;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: aside;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: footer;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>它们得到的布局效果都是等同的：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c91401282c9412b8508ff151b974134~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/OJZaMxW" target="_blank" rel="noreferrer">https://codepen.io/airen/full/OJZaMxW</a></p></blockquote><p>示例中的 <code>grid-row</code> 、<code>grid-column</code> 和 <code>grid-area</code> 属性是用来指定网格项目在网格中的位置，具体的使用将放在后面的课程中阐述，这里你只需要知道它用来放置网格项目即可。</p><h2 id="使用-grid-template-areas-定义网格" tabindex="-1">使用 grid-template-areas 定义网格 <a class="header-anchor" href="#使用-grid-template-areas-定义网格" aria-label="Permalink to &quot;使用 grid-template-areas 定义网格&quot;">​</a></h2><p>网格布局中，除了使用 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 创建一个显式网格之外，还可以使用 <code>grid-template-areas</code> 来创建。</p><p>该属性可以用来给网格区域命名，并且指定了命名的网格区域不与任何特定的网格项目关联，但可以将已命名好的网格区域名称用在 <code>grid-row</code> 、<code>grid-column</code> 和 <code>grid-area</code> 属性上，这些属性会按照网格区域名称来放置网格项目。它除了给网格区域命名之外，还提供了网格结构的可视化，使网格容器的整体布局更容易理解。该属性主要接受的值有：</p><ul><li><code>none</code> ：表示没有命名的网格区域，同样也没有显式的网格轨道被这个属性定义（尽管显式的网格轨道仍然可以由 <code>grid-template-columns</code> 或 <code>grid-template-rows</code> 创建）。</li><li><code>&lt;string&gt;</code> ：为<code>grid-template-areas</code> 属性列出的每一个单独的字符串创建一行，用空格分隔的每一个字符串代表的是一个单元格，对应会创建一列网格轨道。多个同名的，跨越相邻行或列的单元格称为网格区域。非矩形的网格区域是无效的。</li></ul><p>简单地说，<code>grid-template-areas</code> 中的每个字符串值都代表网格中的单元格，每行字符串（由多个空格隔开的字符串）代表网格中的行轨道，每个字符串中以空格分隔的一组值代表网格中的列轨道。比如下面这个示例：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header  header  header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav     main    aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer  footer  footer&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><code>grid-template-areas</code> 属性值等同于绘制了一个<code>3 x 3</code> （三行三列）的网格：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">----------------------------------</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">|  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">  |  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">  |  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">  |</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">----------------------------------</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">|  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">     |  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">    |  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">   |</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">----------------------------------</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">| </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">   |  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">  |  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">  |</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">----------------------------------</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>即：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc38354733914e109f80bab1b03ac18f~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>如此一来，你可以使用 <code>grid-template-areas</code> 结构化（可视化）来构建 Web 布局，比如我们常见的一个 Web 布局：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f59394d7045472c9151ecb884c38f37~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Primary Navigation Or Tools</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Secondary Navigation</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Main Content Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Tertiary Navigation</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Miscellaneous Information</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header   header   header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav      main     aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav      footer   footer&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: header;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: nav;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: main;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: aside;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: footer;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cd38cf9f20e4609a7a01c36883f2423~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/xxjQVGG" target="_blank" rel="noreferrer">https://codepen.io/airen/full/xxjQVGG</a></p></blockquote><p>注意，为了让示例更符合我们所需要的 Web 布局效果，示例中将 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 属性的值设置为 <code>auto 1fr auto</code> ，用来指定网格轨道的尺寸。</p><p>在 CSS 网格布局中，使用 <code>grid-template-areas</code> 定义一个显式网格是很容易的，但使用它给网格区域命名时有一定的规则，如果你在使用的时候违反了这些规则，将会造成 <code>grid-template-areas</code> 失效，甚至定义出来的网格不是你所期望的网格。</p><p>这里简单的给大家整理了 <code>grid-template-areas</code> 属性给网格区域命名的六条规则：</p><ul><li>规则① ：必须描述一个完整的网格，即网格上的每一个单元格都必须被填充；</li><li>规则② ：一连串的空白，代表什么都没有，将造成 <code>grid-template-areas</code> 语法错误；</li><li>规则③ ：在网格命名中可以使用一个或多个<code>.</code>（<code>U+002E</code>），代表一个空单元格；</li><li>规则④ ： 多个相同单元格命名（令牌）创建一个具有相同名称的命名网格区域。简单地说，跨行或列命名相同的网格区域名称，可以达到合并单元格的作用；</li><li>规则⑤ ：任何其他字符的序列，会代表一个垃圾标记（Trash Token），会使声明无效；</li><li>规则⑥ ：当序列化 <code>grid-template-areas</code> 的 <code>&lt;string&gt;</code> 值是指定值或计算值时，相邻两字符串（网格区域命名）被一个空格（<code>U+0020</code>）隔开，当两者之间有多个空格符时，会被视为一个，其他空格将会被忽略。</li></ul><p>先来看第一条规则。</p><blockquote><p><strong>规则① ：必须描述一个完整的网格，即网格上的每一个单元格都必须被填充</strong> 。</p></blockquote><p>比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header header header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav    main   aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer footer footer&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header   header   header  header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav      main     main    aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer   footer   footer  footer&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>虽然创建的网格是不一样的，一个是 <code>3 x 3</code> 的网格，一个是 <code>4 x 3</code> 的网格，但最终的布局效果是一样的：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7704a436d43e466ea973280f565e6600~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/XWqyKLq" target="_blank" rel="noreferrer">https://codepen.io/airen/full/XWqyKLq</a></p></blockquote><p>从上图的效果中可以得知，<strong>每个命名对应的是一个网格单元格</strong> 。</p><p>第二条规则：</p><blockquote><p><strong>规则② ：一连串的空白，代表什么都没有，将造成</strong> <strong><code>grid-template-areas</code></strong> <strong>语法错误。</strong></p></blockquote><p>即，<strong>使用一连串空格来代表一个命名区域</strong> 。在上面的示例基础中做一下调整：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header   header   header  header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav      main     main    aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer   footer   footer  footer&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header   header   header       &quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav      main     main    aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer   footer   footer  footer&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>在第二个<code>.container</code> 中，使用了一连串的空格来替代<code>header</code> ，此时，浏览器会视 <code>grid-tempate-areas</code> 的值是一个无效值，造成 <code>grid-template-areas</code> 属性语法错误，创建的网格也就是一个不符合要求的网格：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9917cf45afc54439a458d114ba5d3bd8~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>使用<strong>规则①</strong> 可以实现区域填充网格且不留空余空间，但不能使用<strong>规则②</strong> 来给网格留出一个空的或几个空的单元格。可实际生产中，Web 布局有时的确需要有空的单元格存在。比如下图这样的 Web 布局：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc2891bc68f746418016f0b6d88c8c68~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>如果想给网格留出空白区域（空白的单元格），那就要使用规则三：</p><blockquote><p><strong>规则③ ：在网格命名中可以使用一个或多个 <code>.</code>（<code>U+002E</code>），代表一个空单元格</strong>。</p></blockquote><p>可以在 <code>grid-template-areas</code> 中使用一个点（<code>.</code>）或多个点（<code>...</code>）来告诉浏览器，这个单元格是空白单元格，如果连续有几个都是用点来表示的单元格，则连接区域是一个空白区域。比如上图左侧的布局，中间部分距离浏览器左右两侧都是空白区域，你就可以这样来设置 <code>grid-template-areas</code> 属性的值：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header  header  header  header  header  header   header    header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;...     main    main    main    main    sidebar  sidebar   ...&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;...     twin-a  twin-a  twin-a  twin-b  twin-b   twin-b    ...&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer  footer  footer  footer  footer  footer   footer     footer&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca931485f3d846b8bd04bafcd2b380de~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/KKRraRg" target="_blank" rel="noreferrer">https://codepen.io/airen/full/KKRraRg</a></p></blockquote><p>另一个布局也是类似的：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header  header  menu    menu    menu    menu    menu    menu&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;hero    hero    hero    hero    hero    hero    hero    hero&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;main    main    main    main    main    ...     image   image&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;main    main    main    main    main    ...     extra   extra&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;...     brand   brand   brand   brand   brand   brand   ...&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer  footer  footer  footer  footer  footer  footer  footer&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af3030dfa54c4ba1a37fef7bc8677225~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/MWGzJzo" target="_blank" rel="noreferrer">https://codepen.io/airen/full/MWGzJzo</a></p></blockquote><p>示例中使用了<code>...</code> 来代表空单元格，你可以根据自己的喜好，设置任意数量的点号<code>.</code> ，比如 <code>....</code> ，它们和使用一个点（<code>.</code>）所起的作用是等同的。即 <strong><code>.</code>、 <code>..</code>、 <code>...</code> 和 <code>....</code> 等同，在 <code>grid-template-areas</code> 中代表的是一个空单元格</strong> 。</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header header header header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;.      main   aside  .&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer footer footer footer&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 等同于 */</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header header header header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;...    main   aside  ...&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer footer footer footer&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>但在使用多个点代表空单元格时有一个细节尤其要注意，那就是<strong>点与点之间不能有任何空格，否则将会代表多个空单元格</strong> ，比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header header header header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav    main    main   aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;. .    footer  ...&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 等同于 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header header header  header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav    main   main    aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;.      .      footer  ...&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba218064b35942cb8b7288810340a951~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/vYjQvNo" target="_blank" rel="noreferrer">https://codepen.io/airen/full/vYjQvNo</a></p></blockquote><p>第四条规则：</p><blockquote><p><strong>规则④ ： 多个相同单元格命名（令牌）创建一个具有相同名称的命名网格区域。简单<strong><strong>地</strong></strong>说，跨行或列命名相同的网格区域名称，可以达到合并单元格的作用</strong>。</p></blockquote><p>其实，前面的示例中已经有<strong>规则④</strong> 存在了。这里还是单独拿一个示例来介绍，大家更易于理解。例如下图这个示例，需要将侧边栏（<code>sidebar</code>）和页脚（<code>footer</code>）合并起来（<code>main</code> 和 <code>footer</code> 区域具有相同的宽度）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/521be410deea4823a5ef43ac4358bc28~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>可以像下面这样给网格区域命名：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header  header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;sidebar main&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer  footer&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header  header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;sidebar main&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;sidebar footer&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f9104c9819d40f3818799617b09a9f6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/BaxGMmx" target="_blank" rel="noreferrer">https://codepen.io/airen/full/BaxGMmx</a></p></blockquote><p>两者差异如下图所示：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/123220480c894bc3ad83d30f1e1d00f0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>通过给网格区域命名来达到合并多个单元格时，你只能按行轨道或列轨道方向合并。也就是说，<strong>一个命名的网格区域跨越多个网格单元格时，它们必须要形成一个单一的填充矩形，否则会造成</strong> <strong><code>grid-template-areas</code></strong> <strong>属性失效</strong> ，比如说一个 <code>L</code> 的形状：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7b389309edf475d8c6b1281c4d5953d~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p><strong>规则⑤</strong> 提到了，给网格区域命名并不是任何名称都是有效的：</p><blockquote><p><strong>规则⑤ ：任何其他字符的序列，会代表一个垃圾标记（Trash Token），会使声明无效。</strong></p></blockquote><p>在显式给网格区域命名时，尽可能使用有语义的名称，比如前面示例中所示的<code>header</code> 、<code>nav</code> 等等。切勿使用一些数字、标点符号以及它们的组合等，比如 <code>1</code> 、<code>#</code> 、<code>1st</code> 等，将会被视为无效的声明。如果命名的名称是无效的，那么 <code>grid-template-areas</code> 属性也会被视为无效：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 请不要像这样给网格区域命名 */</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;1    1     a%b    a%b&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;1st  main  main   main&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;1st  3rd   3rd    3rd&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>不过，也可以像给网格线命名那样，使用表情符（Emoji）或（和）HTML 的实体符：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;↤     ↤     ↤    ↤     ↤     ↤&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;⺗    ✨    ✨    ✨    ①    ①&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;⺗    ☑     ☑     ☑    ☑     ☑&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: ↤;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: ⺗;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: ①;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: ✨;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-area</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: ☑;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4ade54df6064b6fb28de9ed3ba745f6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/JjvezzZ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/JjvezzZ</a></p></blockquote><p>虽然可以这么使用，但强烈建议不要在生产中这样使用！</p><p>最后一条规则：</p><blockquote><p><strong>规则⑥ ：当序列化</strong> <strong><code>grid-template-areas</code></strong> <strong>的</strong> <strong><code>&lt;string&gt;</code></strong> <strong>值是指定值或计算值时，<strong><strong>相邻两字符串（网格区域命名）被一个空格（</strong></strong><code>U+0020</code>）隔开，当两者之间有多个空格符时，会被视为一个，其他空格将会被忽略</strong> 。</p></blockquote><p>简单地说，<code>grid-template-areas</code> 属性中同一行相邻的两个名称（<code>&lt;string&gt;</code>）之间的空格符的数量总是会被视为只有一个。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81cc8e011080481e8a56d298a1ac98a9~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>上图中，两个<code>grid-template-areas</code> 的值最终被浏览器解析出来的结果是一样的。</p><p>也就是说，在使用 <code>grid-template-areas</code> 定义网格时，命名应该遵循这些规则，不然容易造成语法上的错误，使该属性失效：</p><ul><li>规则① ：必须描述一个完整的网格，即网格上的每一个单元格都必须被填充；</li><li>规则② ：一连串的空白，代表什么都没有，将造成 <code>grid-template-areas</code> 语法错误；</li><li>规则③ ：在网格命名中可以使用一个或多个<code>.</code>（<code>U+002E</code>），代表一个空单元格；</li><li>规则④ ： 跨行命名相同的网格区域名称，可以达到合并单元格的作用；</li><li>规则⑤ ：任何其他字符的序列，会代表一个垃圾标记（Trash Token），会使声明无效。</li></ul><p><code>grid-template-areas</code> 在显式给网格区域命名的同时，也隐式创建了相应的行网格线与列网格线，并且网格线的名称是以 <strong><code>网格区域名称-start</code></strong> 和 <strong><code>网格区域名称-end</code></strong> 方式命名。例如，网格区域的名称叫 <code>header</code> ，则围绕该区域会创建四条隐式网格线：</p><ul><li>行网格线，<code>header-start</code> 和 <code>header-end</code> ；</li><li>列网格线， <code>header-start</code> 和 <code>header-end</code>。</li></ul><p>随意拿前面的一个示例来看：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header header header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav    main   aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer footer footer&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;header header header header&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;nav    main   main   aside&quot;</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">        &quot;footer footer footer footer&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d520eead57cc4725b08e76941ca5e79d~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>如此一来，结合前面的内容，我们可以得知，给网格线命名时，就可以：</p><ul><li>几乎可在中括号 <code>[]</code> 中使用除关键词 <code>span</code> 、<code>inherit</code> 、<code>initial</code> 、<code>revert</code> 、<code>all</code> 、<code>unset</code> 和 <code>auto</code> 等之外的任意 <code>&lt;string&gt;</code> 符，也包括表情符（Emoji）和 HTML 实体符；</li><li><code>grid-template-areas</code> 创建的网格区域名称，会以 <code>-start</code> 和 <code>-end</code> 为后缀创建四条隐式命名网格线名称；</li><li>可以在中括号 <code>[]</code> 中同时给同一条网格线命名多个名称，多个名称之间需要用空格分隔；</li><li>多条网格线可以有相同的名字，引用时在名字后面附上网格线对应的数字索引号；</li><li>在未显式给网格线命名时，将会以数字为网格线编号。</li></ul><blockquote><p><strong>使用</strong> <strong><code>grid-template-columns</code></strong> <strong>、<code>grid-template-rows</code></strong> <strong>和</strong> <strong><code>grid-template-areas</code></strong> <strong>属性定义的网格是一个显式网格</strong> 。有明确的网格轨道（行或列）和单元格数量。</p></blockquote><h2 id="使用-grid-auto-columns-和-grid-auto-rows-定义网格" tabindex="-1">使用 grid-auto-columns 和 grid-auto-rows 定义网格 <a class="header-anchor" href="#使用-grid-auto-columns-和-grid-auto-rows-定义网格" aria-label="Permalink to &quot;使用 grid-auto-columns 和 grid-auto-rows 定义网格&quot;">​</a></h2><p>通过前面课程的学习，我们知道了什么是显式网格，以及如何定义一个显式网格。在 CSS 网格布局中，除了使用 <code>grid-template-*</code> （<code>grid-template-columns</code> 、<code>grid-template-rows</code> 和 <code>grid-template-areas</code>）之外，还可以使用 <code>grid-auto-*</code> （即 <code>grid-auto-columns</code> 、<code>grid-auto-rows</code> 和 <code>grid-auto-flow</code>）来定义一个网格。</p><p>这里先从 <code>grid-auto-columns</code> 和 <code>grid-auto-rows</code> 属性开始。</p><p>你已经知道了，可以在网格容器上显式设置 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 值定义一个网格，并且指定网格轨道的尺寸大小。比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>grid-template-columns</code> 告诉浏览器创建了一个两列（列宽是 <code>200px</code>）的网格，但并没有告诉浏览器，网格有几行以及行高是多少。这个时候浏览器会根据网格项目来创建行轨道。</p><p>当网格容器只有一个或两个网格项目时，它创建的是一个 <code>1 x 2</code> （一行两列）的网格；当网格项目超过<code>2</code> （即网格列轨道数量，<code>grid-template-columns</code> 属性的值，此例为<code>2</code>）时，浏览器会新创建一个行轨道，并且以内容高度为行轨道高度，依此类推：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ff1f82677894aab8d057ba14cf1b2b9~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/oNdQRZL" target="_blank" rel="noreferrer">https://codepen.io/airen/full/oNdQRZL</a></p></blockquote><p>浏览器会这样处理，是因为我们并没有明确地把网格项目放置到指定的网格单元格（或网格区域上），因此它会被 <strong>自动放置（Auto Placement）</strong> 。默认情况下，每个网格项目在行轴和列轴上的跨度（<code>span</code>）都是 <code>1</code> ，所以它们都会被放置到下一个可用的网格单元格中。</p><p>对于自动放置（Auto Placement），<a href="https://www.w3.org/TR/css-grid/#grid-auto-flow-property" target="_blank" rel="noreferrer">W3C 规范中有明确的定义</a>：</p><blockquote><p>Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container.</p></blockquote><p>大致意思是 “<strong>没有明确放置的网格项目会被自动放置到网格容器中一个未被占用的空间（网格单元格）</strong> ”。但它有一个最基本的规则：</p><blockquote><p><strong>网格中的网格项目会把自已摆放到网格中，每一个网格会有一个网格项目。默认的流向是按行排列网格项目。这是因为</strong> <strong><code>grid-auto-flow</code></strong> <strong>属性默认值为</strong> <strong><code>row</code></strong> 。</p></blockquote><p>上面这个示例的效果也验证了这一基本原则。在网格中这个新增的行被称为<strong>隐式行轨道</strong> ，被自动创建的隐式行轨道的尺寸是自适应大小的，它会根据它所包含的内容来设定行轨道尺寸，以保证内容不溢出网格。</p><p>从这里，我们可以获得两点信息：</p><ul><li>由自动放置网格项目而创建新的隐式行轨道，它的尺寸也是可以被显式设置的；</li><li>虽然网格默认流向是按行排列网格项目，但是我们也可以让它按列排列，只需要更改 <code>grid-auto-flow</code> 属性的值。</li></ul><p>第一点比较好理解，在网格布局中，有一个类似于 <code>grid-template-rows</code> 的属性，即 <code>grid-auto-rows</code> ，该属性主要用来显式指定隐式行轨道的尺寸。比如，我们在上面的示例中新增一行代码：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 设置隐式行轨道尺寸 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>这个时候 <code>grid-auto-rows</code> 指定了隐式行网格轨道的尺寸是 <code>200px</code> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da18c53d6efd4be79023389bcedbde90~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/oNdQrbo" target="_blank" rel="noreferrer">https://codepen.io/airen/full/oNdQrbo</a></p></blockquote><p><code>grid-auto-rows</code> 属性和 <code>grid-template-rows</code> 属性类似，可以设置多个值，并且每个值之间使用空格隔开。比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 160</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15290f5cde984865987e6065ac904605~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/jOxXLZL" target="_blank" rel="noreferrer">https://codepen.io/airen/full/jOxXLZL</a></p></blockquote><p>不难发现，<code>grid-auto-rows</code> 属性的值是不断循环的，将所设置的值按创建的隐式行轨道循环下去。比如上面示例中的 <code>grid-auto-rows: 100px 160px 1fr</code> ，当：</p><ul><li>只有一行行网格轨道时，它的尺寸是 <code>100px</code>；</li><li>有两行行网格轨道时，第一行是 <code>100px</code>，第二行是 <code>160px</code>；</li><li>有三行行网格轨道时，第一行是 <code>100px</code> ，第二行是 <code>160px</code> ，第三行是 <code>1fr</code>；</li><li>有四行网格轨道时，第一行是 <code>100px</code> ，第二行是 <code>160px</code> ，第三行是 <code>1fr</code> ，第四行将开始重新循环，即它的行高是 <code>100px</code>；</li><li>依此类推 ……</li></ul><p>这个特性是 <code>grid-template-rows</code> 属性没有的，那是因为 <code>grid-template-rows</code> 指定的值数量是设置显式网格的，如果网格行轨道超过 <code>grid-template-rows</code> 属性值的数量时，它将自动创建隐式的行网格轨道，在没有显式设置 <code>grid-auto-rows</code> 时，将会默认以 <code>auto</code> 值来设置创建的隐式行网格轨道尺寸：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f5044678e094b2e8a957a667b450a0e~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>当然，在网格布局中，你可以将 <code>grid-tempalte-rows</code> 和 <code>grid-auto-rows</code> 组合在一起使用，它们将会告诉浏览器，显式行网格轨道尺寸按照 <code>grid-template-rows</code> 属性值计算，隐式行网格轨道尺寸按照 <code>grid-auto-rows</code> 属性值计算。比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">80</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 160</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/181617aa9ad54000b732a01ed194c938~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/xxjmLYm" target="_blank" rel="noreferrer">https://codepen.io/airen/full/xxjmLYm</a></p></blockquote><p>也就是说，在 CSS 网格布局中，<code>grid-template-rows</code> 和 <code>grid-auto-rows</code> 都是用来设置网格行轨道尺寸的，不同的是：</p><ul><li><code>grid-template-rows</code> 设置<strong>显式行网格轨道尺寸</strong>；</li><li><code>grid-auto-rows</code> 设置<strong>隐式行网格轨道尺寸</strong>。</li></ul><p>它们可以用的值类型几乎是一致的，即可用于<code>grid-template-rows</code> 属性的值都可以用在 <code>grid-auto-rows</code> 属性上，需要注意的是 <code>repeat()</code> 函数用于 <code>grid-auto-rows</code> 时会失效，当其失效时，<code>grid-auto-rows</code> 会取其默认值 <code>auto</code> 。</p><blockquote><p><strong><code>grid-auto-columns</code></strong> <strong>的使用和</strong> <strong><code>grid-auto-rows</code></strong> <strong>一样，不同的是它用来创建隐式列轨道和隐式列轨道尺寸</strong> 。</p></blockquote><h2 id="使用-grid-auto-flow-改变网格排列方向" tabindex="-1">使用 grid-auto-flow 改变网格排列方向 <a class="header-anchor" href="#使用-grid-auto-flow-改变网格排列方向" aria-label="Permalink to &quot;使用 grid-auto-flow 改变网格排列方向&quot;">​</a></h2><blockquote><p>CSS 网格中的 <code>grid-auto-flow</code> 属性有点类似于 Flexbox 布局中的 <code>flex-direction</code> 属性！</p></blockquote><p>如果你没有在网格容器上显式设置 <code>grid-template-columns</code> 、<code>grid-template-rows</code> 和 <code>grid-template-areas</code> 属性值的话，那么默认情况，网格项目是沿着块轴（Block Axis）方向顺流下来的。由于我们使用的语言，其阅读和书写方式默认是 <code>ltr</code> （Left-To-Right），所以你看到的是会新增行网格轨道来自动放置网格项目。</p><p>要是你调整 CSS 的书写模式，即 <code>writing-mode</code> 的值或者 <code>direction</code> 的值，你会看到网格项目流的方向会做出相应调整，但始终默认是沿着块轴方向放置：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5a74e54982b425fa02868c19b410bcb~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/gOzZGvX" target="_blank" rel="noreferrer">https://codepen.io/airen/full/gOzZGvX</a></p></blockquote><p>即网格流受书写模式影响：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54d99ecf2edd4899b92243d7c3c417a0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p><strong>注意，如果没有特殊声明，我们的书写模式都是</strong> <strong><code>ltr</code></strong> <strong>模式</strong> ！</p></blockquote><p>在网格布局中，我们可以使用 <code>grid-auto-flow</code> 来控制流的方向。该属性可以接受的值主要有：</p><ul><li><code>row</code> ：自动放置算法，通过依次填充每一行来放置网格项目，必要时添加新行。如果既没有提供行也没有提供列，则假定是行。</li><li><code>column</code> ：自动放置算法，通过依次填充每一列来放置网格项目，必要时添加新的列。</li><li><code>dense</code> ：如果 <code>grid-auto-flow</code> 属性指定了该值，自动放置算法使用 <code>dense</code> （“密集”）包装算法，如果较小的网格项目出现在网格中，它将尝试在较早的时间内填入洞（“网格单元格”）。这可能会导致网格项目不按顺序出现，而这样做会填补大网格项目留下的洞（“单元格”）。如果省略了该值，则使用 <code>sparse</code> （“稀疏”）算法，自动放置算法在放置网格项目时，只在网格中“向前（<code>forward</code>）”移动，从不回溯以填补漏洞。这确保了所有自动放置的网格项目都是“按顺序”出现的，即使是留下了可以由后来的网格项目填补的洞（“网格单元格”）。</li></ul><blockquote><p><strong>注意，<code>dense</code></strong> <strong>只是改变了网格项目的视觉顺序，可能会导致它们出现失序，这对 Web 可访问性是不利的。</strong></p></blockquote><p>简单地说，<code>grid-auto-flow</code> 可以接受 <code>row</code> （即默认值），<code>column</code> ，<code>dense</code> 以及 <code>row</code> 、<code>column</code> 和 <code>dense</code> 的组合值，即 <code>row dense</code> 和 <code>column dense</code> 。</p><p>比如下面这个示例：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-flow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--grid-auto-flow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 指定隐式列轨道尺寸 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>当 <code>grid-auto-flow</code> 取值为 <code>row</code> （即<code>--grid-auto-flow</code> 的值为 <code>row</code> ），这个时候网格项目自动放置是从第一个网格单元格开始，从左往右依次排列，当网格列轨道数量不够时（示例中显式设置的是 <code>3</code> 列），会自动换行：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/506632dde6134ac69f87ad7e53ac1c0c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>当 <code>grid-auto-flow</code> 取值为 <code>column</code> 时，网格项目自动放置会从第一列第一个网格单元格开始，从上往下排列，当网格行轨道数量不够时，会新创建一列网格轨道：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd30f5e99a2d40029e7c49252f934655~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p><code>grid-auto-flow</code> 取值为 <code>row</code> 和 <code>column</code> 时网格项目自动放置流方向对比如下：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e10924ec3a34874adf1d8db41ffb3ec~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/wvjRpoM" target="_blank" rel="noreferrer">https://codepen.io/airen/full/wvjRpoM</a></p></blockquote><p>注意，在这个示例中，你看不到 <code>grid-auto-flow</code> 取值为 <code>dense</code> 以及 <code>row dense</code> 和 <code>column dense</code> 带来的变化，因为我们示例是一个按顺序，按方向自动放置网格项目的。</p><p>我们把上面示例调整一下：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 显式创建了一个 4 x 2, 四列两行的网格 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 网格默认流的向就是 row */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-flow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--grid-auto-flow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 设置隐式列网格轨道和隐式行网格轨道尺寸 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 根据网格线编号来放置网格项目 */</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4n+1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-column-end</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: span </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-row-end</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: span </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">} </span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">} </span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><p>此时，<code>grid-auto-flow</code> 值为 <code>row</code> 或 <code>column</code> 时，都会有空的单元格出现，而这些空的单元格也称为“网格洞”。意思就是，应该按照顺序填充的单元格却没有被填充，好比在一个布局挖了几个洞。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f2a71db95d54e60b36d70812ded4a87~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>在网格中会产生这样的网格洞（网格缺口），是因为对于自动放置的网格项目，如果网格轨道的大小不适合放入一个网格项目，这个网格项目就会自动被移到下一行，直到它找到了可以容纳它的空间。</p><p>在网格布局中，我们并不希望有上面示例这种现象产生，即<strong>产生网格缺口</strong> 。如果你想避免这种现象产生，需要在网格容器上显式将 <code>grid-auto-flow</code> 的值设置为 <code>dense</code> 。如果网格流的顺序是 <code>row</code> 时，可以使用 <code>row dense</code> ，但它的效果和 <code>dense</code> 一样，这主要是因为 <code>grid-auto-flow</code> 的默认值是 <code>row</code> 。如果你网格流的顺序是 <code>column</code> ，那就需要显式设置 <code>column dense</code> 才能避免网格缺口出现。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/afbebd2dcfdb405ca1bf5c98d07c1ca7~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p><code>row</code> 、<code>column</code> 、<code>dense</code> 、<code>row dense</code> 和 <code>column dense</code> 效果对比如下：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6dcb35b16ffb4bdc91507268d9508cd6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/JjvwMeV" target="_blank" rel="noreferrer">https://codepen.io/airen/full/JjvwMeV</a></p></blockquote><p>这个功能，在创建图片墙时非常有用:</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;gallery&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;https://source.unsplash.com/random?iran&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- ... 此处省略14个 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.gallery</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">8</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">8</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">8</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">8</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vw</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-flow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--grid-auto-flow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.gallery</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.gallery</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.gallery</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">6</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: span </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: span </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.gallery</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.gallery</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">7</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.gallery</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">9</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: span </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: span </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc0a9e1f7c6640589d1402243dfcc50d~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/oNdJEqz" target="_blank" rel="noreferrer">https://codepen.io/airen/full/oNdJEqz</a></p></blockquote><h2 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-label="Permalink to &quot;小结&quot;">​</a></h2><p>在 CSS 网格中，网格容器的 <code>grid-template-rows</code> 、<code>grid-template-columns</code> 和 <code>grid-template-areas</code> 属性定义了显式网格的固定数量的网格轨道。当网格项目被定位在这些界限之外时，网格容器会通过向网格添加隐式网格线来生成隐式网格轨道。这些网格线与显式网格线一起构建了隐式网格。</p><p>另外，网格容器的 <code>grid-auto-rows</code> 和 <code>grid-auto-columns</code> 属性对这些隐式网格轨道，以及由 <code>grid-template-areas</code> 创建但未被 <code>grid-template-rows</code> 或 <code>grid-template-columns</code> 明确调整大小的任何显式网格轨道进行调整。</p><p>同时，网格容器的 <code>grid-auto-flow</code> 属性控制没有明确位置的网格项目的自动放置。一旦显式网格被填满（或没有显式网格），自动放置也会创建隐式网格。</p><p>我们可以这样来理解：</p><ul><li><code>grid-template-rows</code> 、<code>grid-template-columns</code> 和 <code>grid-template-areas</code> 定义显式网格，但 <code>grid-template-areas</code> 无法指定网格轨道尺寸大小。</li><li><code>grid-template-rows</code> 和 <code>grid-template-columns</code> 可用来指定显式网格轨道数量和尺寸。</li><li><code>grid-auto-rows</code> 和 <code>grid-auto-columns</code> 以及 <code>grid-auto-flow</code> 可用来创建隐式网格。</li><li><code>grid-auto-rows</code> 和 <code>grid-auto-columns</code> 可用来指定隐式网格轨道尺寸。</li><li><code>grid-auto-flow</code> 可以用来控制网格流的方向以及自动放置网格项目的算法。</li><li><code>grid-row</code> 、<code>grid-column</code> 和 <code>grid-area</code> 将网格项目放置在显式网格之外时也将会创建隐式网格，即使未使用 <code>grid-template-rows</code> 、<code>grid-template-columns</code> 和 <code>grid-template-areas</code> 也能创建隐式网格。</li></ul><p>来到这里，我们已经知道了如何创建（或定义）一个网格，一个符合自己要求的网格。但这只是使用网格布局的基础之一，我们还需要知道如何设置网格轨道的尺寸。网格轨道尺寸的设置涉及到了一些网格的计算。那么接下来的课程，我们主要来介绍网格中的计算。</p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-label="Permalink to &quot;Contributors&quot;">​</a></h2><div><section class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16m.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995c0-1.224-1.47-2.74-3.153-3.145"></path></svg> 作者:<span>Long Mo</span></div><!----><!----><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.485 6.879l1.036 4.144l.997-3.655a.5.5 0 0 1 .964 0l.997 3.655l1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 9.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"></path></svg> 字数统计:<span>10.8k 字</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 20 20" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm2.5 14.5L9 11V4h2v6l3 3z"></path></svg> 阅读时长:<span>40 分钟</span></div></section></div><div class="flex gap-2 items-center"><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank"><img src="https://github.com/Longmo666.png" class="w-8 h-8 rounded-full"></a> Long Mo</div><div class="px-[1.2rem] relative py-[1rem] border-1 border-[var(--vp-c-border)]/[.55] w-full min-h-[32px] border-solid mt-[32px] leading-[24px] rounded-[4px]"><svg style="display:inline-block;" viewBox="0 0 512 512" width="1.2em" height="1.2em" class="absolute top-[1rem] right-[1.2rem]"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512a256 256 0 1 0 0 512m-56.6-199.4c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z"></path></svg><section class="flex flex-col gap-y-[8px] overflow-hidden"><div><span class="font-bold">文章作者：</span><span><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank">Long Mo</a></span></div><div><span class="font-bold">版权声明：</span><span> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noreferrer" target="_blank"> CC BY-NC-SA 4.0 </a> 许可协议。转载请注明来自 <a href="#" rel="noreferrer" target="_blank">Longmo Docs</a></span> ！ </div></section></div></div></div></main><footer class="VPDocFooter" data-v-e512d8d8 data-v-73a75ed6><!--[--><!--]--><div class="edit-info" data-v-73a75ed6><div class="edit-link" data-v-73a75ed6><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/xxx" target="_blank" rel="noreferrer" data-v-73a75ed6><!--[--><span class="vpi-square-pen edit-link-icon" data-v-73a75ed6></span> 在 github 上编辑此页<!--]--></a></div><div class="last-updated" data-v-73a75ed6><p class="VPLastUpdated" data-v-73a75ed6 data-v-28126c9f>上次更新: <time datetime="2024-03-04T16:28:46.000Z" data-v-28126c9f></time></p></div></div><nav class="prev-next" data-v-73a75ed6><div class="pager" data-v-73a75ed6><!----></div><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link next" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/01" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>下一篇</span><span class="title" data-v-73a75ed6>Web 布局技术演进：了解 Web 布局发展史</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-4c760b95 data-v-4f1388a4><div class="container" data-v-4f1388a4><!----><p class="copyright" data-v-4f1388a4>Copyright © 2024-present Longmo</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"css3_lightningcss_index.md\":\"DvrpJ9-C\",\"css3_现代web布局_02.md\":\"NnFPbKjC\",\"css3_postcss_postcss-prefix-selector增加统一作用域.md\":\"BTi7xZ9T\",\"css3_现代web布局_01.md\":\"CSOVLYFa\",\"css3_index.md\":\"gWeubSHW\",\"css3_现代web布局_05.md\":\"XnHgE5qs\",\"css3_现代web布局_07.md\":\"B0JalRYm\",\"electron_electron开发实战_index.md\":\"DlTk4nHM\",\"css3_现代web布局_10.md\":\"QvmMy1qK\",\"css3_现代web布局_03.md\":\"DndCH4AP\",\"css3_现代web布局_22.md\":\"BTcBI1Ar\",\"css3_现代web布局_index.md\":\"BRrTkyN-\",\"react_antd使用踩坑经验汇总_procomponents_index.md\":\"CnA6aYv_\",\"nodejs_change-case更改大小写.md\":\"CtntdOEt\",\"react_react好用的插件_rxjs-hooks.md\":\"CahRrTvr\",\"nodejs_复制移动文件.md\":\"DJvz4Dcu\",\"css3_现代web布局_15.md\":\"CxTdKubj\",\"css3_现代web布局_06.md\":\"DKzKVbHi\",\"guide_axios封装.md\":\"yeyMeLKL\",\"react_react实战_设计模式与最佳实践_服务器端渲染（1）：基本套路.md\":\"Ci9ZteTc\",\"react_react实战_设计模式与最佳实践_react 单元测试.md\":\"ghuW9_Ym\",\"react_react好用的插件_react-to-print.md\":\"DUEXVCMF\",\"css3_现代web布局_12.md\":\"DzvNLnB9\",\"react_react好用的插件_react-load-script.md\":\"DBiqdA1k\",\"electron_electron开发实战_释放前端想象力.md\":\"DjfKiu2P\",\"react_react实战_设计模式与最佳实践_react的设计思想.md\":\"CDFxAnJB\",\"react_react组件库搭建指南_02开发调试.md\":\"C_T24zrV\",\"react_react实战_设计模式与最佳实践_react 的未来（1）： 拥抱异步渲染.md\":\"DDCdfFZA\",\"react_react实战_设计模式与最佳实践_react 状态管理（1）：组件状态.md\":\"CleS-bmU\",\"react_react好用的插件_react-viewer.md\":\"CK92G5ky\",\"electron_electron开发实战_electron应用打包.md\":\"DVihGNUt\",\"react_react好用的插件_index.md\":\"CYvYsgxN\",\"react_react好用的插件_formik-antd.md\":\"BVXoD1vi\",\"react_react实战_设计模式与最佳实践_组件设计模式（2）：高阶组件.md\":\"tcEHCkX9\",\"react_css解决方案_styled-components.md\":\"BdEVJSYP\",\"react_react后台管理系统项目实战_index.md\":\"Cf5Aki5e\",\"react_react好用的插件_floating-ui.md\":\"CJ47U607\",\"react_react好用的插件_js-pinyin.md\":\"CCi7zpiQ\",\"electron_electron开发实战_原生gui.md\":\"CKymHWIE\",\"react_antd使用踩坑经验汇总_tabs选项卡.md\":\"DbBQtB84\",\"react_react好用的插件_immer.md\":\"J3J2rLev\",\"css3_现代web布局_08.md\":\"CKAlv-cw\",\"react_react好用的插件_@ebay_nice-modal-react.md\":\"2t81QhzX\",\"react_react hooks.md\":\"DllmXlwe\",\"react_发布订阅_事件总线.md\":\"DGl0tyUU\",\"react_react组件库搭建指南_03编译打包.md\":\"BSWt83_X\",\"guide_quickstart.md\":\"DNtvLzj7\",\"react_开发一个组件库_如何完善组件单测.md\":\"9v27j5fA\",\"react_慕课网最新react技术栈，实战复杂低代码项目-仿问卷星_index.md\":\"DV2mTP-I\",\"react_ahooks_usewhydidyouupdate.md\":\"DeDGpqMK\",\"react_开发一个组件库_index.md\":\"DFCM9Fyc\",\"react_ahooks_usemutationobserver.md\":\"DopGRhup\",\"react_ahooks_uselocalstoragestate.md\":\"CNKG9DfH\",\"react_如何写出更优雅的 react 组件.md\":\"BNRAsuz5\",\"react_ahooks_useeventlistener.md\":\"C022IGRg\",\"react_ahooks_useloading.md\":\"hmNqPF-b\",\"react_ahooks_usethrottle.md\":\"Cxs7sHDg\",\"react_ahooks_usevirtuallist.md\":\"CbSqBIa_\",\"react_ahooks_index.md\":\"BZgeYQAN\",\"react_ahooks_usethrottleeffect.md\":\"Cu9lbAeN\",\"react_ahooks_useinterval.md\":\"z_JjaRUC\",\"react_ahooks_useinfinitescroll.md\":\"05X3BT3k\",\"react_ahooks_useboolean.md\":\"B9uk9pv1\",\"react_ahooks_usehover.md\":\"CQ90ygMl\",\"react_ahooks_usetoggle.md\":\"Dhg-kOcZ\",\"css3_现代web布局_16.md\":\"DqleGwZV\",\"electron_前端必学的桌面开发：electron_react开发桌面应用_1w多字超详细.md\":\"B4S71t_j\",\"react_index.md\":\"VMykJvDU\",\"react_ahooks_usethrottlefn.md\":\"h86SJGdz\",\"react_ahooks_useurlstate.md\":\"N0NRnJcE\",\"react_ahooks_usetrackedeffect.md\":\"DikGGrmT\",\"react_状态管理_natur.md\":\"CjabmgMv\",\"react_ahooks_useantdtable.md\":\"BRTEfq-4\",\"react_ahooks_userafinterval.md\":\"DbqchCta\",\"react_ahooks_useunmount.md\":\"DKpqgfJ2\",\"getting_index.md\":\"CslhLb_Q\",\"react_ahooks_usepagination.md\":\"BZPuA30r\",\"react_react好用的插件_react-jsx-parse.md\":\"BFws_Jvt\",\"react_ahooks_useprevious.md\":\"DoaMcKL0\",\"react_数据请求的reacthooks库_index.md\":\"BVjU5EHg\",\"nodejs_解压缩.md\":\"B8sDL8Ck\",\"react_开发一个组件库_handlebars模板.md\":\"eFtlYiJE\",\"react_自定义hooks_useasynceffect.md\":\"0TOcgDP8\",\"react_ahooks_usewebsocket.md\":\"BSCnKAhD\",\"css3_现代web布局_09.md\":\"CJg03gvR\",\"react_ahooks_useasynceffect.md\":\"LHnOKcnJ\",\"移动端项目_index.md\":\"BYabTvu-\",\"react_ahooks_usememoizedfn.md\":\"BHTS7A7g\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_index.md\":\"BOXXNcld\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第04章 ts 类易被忽视的重要技能，单件设计模式和相关技能深入.md\":\"CCgSUH_B\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第11章 运用 ts 手写 promise 源码.md\":\"BalHRnKD\",\"react_性能监控_index.md\":\"BLRO71Ft\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第03章 ts类方法代码优化的三大法宝： 函数重载、类方法重载、类构造器重载.md\":\"BS1BYvbm\",\"standard_fatherrc.ts配置文件.md\":\"Dkdjh5--\",\"react_自定义hooks_useexceldownload.md\":\"DGb3CWTU\",\"tools_runjs.md\":\"IzZ9xe5N\",\"tools_自动版本管理和生成changelog.md\":\"Dak6Id3b\",\"react_react实战_设计模式与最佳实践_路由的魔法：react router.md\":\"CZ2pkqmc\",\"tools_依赖镜像地址.md\":\"D5Etjm_v\",\"react_react实战_设计模式与最佳实践_组件设计模式（5）：组合组件.md\":\"D54UFiB5\",\"tools_workspaces核心特性总结.md\":\"CxNbObiL\",\"react_自定义hooks_usegreatasync.md\":\"DRVA9yrK\",\"react_react组件库搭建指南_05标准化发布流程.md\":\"BCCPnMto\",\"react_react实战_设计模式与最佳实践_组件设计模式（1）：聪明组件和傻瓜组件.md\":\"tHZI-Xkb\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第05章 ts继承深入_手写优化底层源码.md\":\"B3EQqYKB\",\"tools_rollup打包.md\":\"tSbCVBX5\",\"tools_webstorm快捷键.md\":\"wTpb7qJx\",\"react_react实战_设计模式与最佳实践_服务器端渲染（2）理解nextjs.md\":\"BqBtpEHC\",\"tools_vscode使用教程.md\":\"CqieXqJ8\",\"react_react最佳实践.md\":\"CG2Xrs5X\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第07章 泛型类_泛型接口_泛型类约束的复杂应用【无比重要的深度技能】.md\":\"CuEcP3SC\",\"react_自定义hooks_useeffectenhanced.md\":\"BSK0VwJa\",\"vue_index.md\":\"OW-QE8NS\",\"react_状态管理_react中的组件通信方案.md\":\"D8VvM0h8\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_index.md\":\"CHFAmRtj\",\"standard_pretty-quick.md\":\"CL9LWL6Z\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_第10章ts声明文件，ts模块.md\":\"BgUWX90K\",\"react_ahooks_usesetstate.md\":\"jYidiqGI\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第06章 ts高频使用技能： 类型断言、类型守卫、自定义守卫_ 多态_类型守卫组合应用.md\":\"DTiCfWrY\",\"standard_typings.d.ts.md\":\"COgkopwu\",\"react_react实战_设计模式与最佳实践_组件设计模式（4）：提供者模式.md\":\"CpJkLsBD\",\"typescript_axios_index.md\":\"CjiV2R0j\",\"css3_现代web布局_23.md\":\"DtcX9bTS\",\"electron_electron开发实战_app特性.md\":\"CCGKgh2J\",\"tools_常用命令.md\":\"BCECAPPN\",\"react_ahooks_useupdateeffect.md\":\"B8UnIDT1\",\"tools_npm镜像源管理工具.md\":\"BQvl6-cK\",\"react_自定义hooks_index.md\":\"TbSBlD7i\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第15章 js 原型_复杂原型继承 【查漏补缺】.md\":\"Bym60KVf\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第12章整合vue3手写高水准大厂的ts版vuex4源码.md\":\"Cb3ALa6o\",\"react_css解决方案_css_module.md\":\"kmxgfb6l\",\"css3_现代web布局_04.md\":\"qxIAivzd\",\"react_ahooks_useraftimeout.md\":\"zZ6X2MGp\",\"react_自定义hooks_usecopy.md\":\"B_vVrQah\",\"react_useform.md\":\"D7K5ezD8\",\"css3_现代web布局_27.md\":\"DVEkZdZW\",\"react_状态管理_valtio.md\":\"CXPGtt95\",\"typescript_tsup如何使用.md\":\"CHCfoXjX\",\"react_ahooks_usecookiestate.md\":\"CdRty31d\",\"tools_node各类命令.md\":\"Dp8hvkZX\",\"electron_electron开发实战_electron优化白屏.md\":\"TluuIOV8\",\"css3_现代web布局_24.md\":\"BTAj5AxQ\",\"css3_现代web布局_13.md\":\"BvIlMTco\",\"css3_现代web布局_14.md\":\"CXYZfM8r\",\"react_antd使用踩坑经验汇总_antdtable表格.md\":\"DJY5Mvdl\",\"guide_babel.md\":\"DTbGDSVq\",\"react_状态管理_zustand翻译文档.md\":\"D72s6MxU\",\"guide_index.md\":\"zNzT7elx\",\"tools_资源导航.md\":\"ByR0zpON\",\"react_antd使用踩坑经验汇总_menu菜单.md\":\"CUT3snoK\",\"tools_pnpm多包项目.md\":\"B5SWK1rS\",\"guide_webpack插件.md\":\"RycubFW9\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第02章 全栈思维全面深度掌握 ts 类.md\":\"DT7QMqkY\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第10章 从装饰器应用，底层 js 到 仿 nestjs实战，路由器底层复杂泛型.md\":\"D8kaCtfy\",\"electron_electron开发实战_开发一个简单版的番茄钟.md\":\"CrvCihNB\",\"react_ahooks_useclickaway.md\":\"CZiIOkBS\",\"index.md\":\"C-4ajOyn\",\"react_自定义hooks_useinterval.md\":\"CL7txl3c\",\"nodejs_请求工具类.md\":\"pJv1vv26\",\"react_ahooks_usedebouncefn.md\":\"DoBqhrGU\",\"getting_why.md\":\"B0La2IDF\",\"vue_vue2打包优化.md\":\"o7QF6PW3\",\"nodejs_globby.md\":\"CTH274g9\",\"standard_tsconfig.json.md\":\"CFCzGYxu\",\"react_reactrouter.md\":\"B9PtxEJ9\",\"typescript_ts-challenge.md\":\"CQjhG-Mq\",\"css3_现代web布局_18.md\":\"DbKppEVn\",\"react_ahooks_usedebounce.md\":\"DRqZkoSI\",\"react_自定义hooks_useintersection.md\":\"Bvd3uAWW\",\"nodejs_cli工具_index.md\":\"CGwLSUZ5\",\"react_react实战_设计模式与最佳实践_index.md\":\"C8mvV9MI\",\"tools_规范git代码提交信息.md\":\"BASOsPqX\",\"tools_windows测试ip端口.md\":\"DG6x0Mw8\",\"electron_electron开发实战_使用nodejs调用原生模块.md\":\"CRvmiRGG\",\"nodejs_kill-port跨平台解决端口占用问题.md\":\"BEoOmVOA\",\"css3_现代web布局_28.md\":\"jsAdcmE1\",\"react_react实战_设计模式与最佳实践_组件实践（1）：如何定义清晰可维护的接口.md\":\"C9ky0LxI\",\"react_react实战_设计模式与最佳实践_react 的未来（3）：函数化的 hooks.md\":\"CFPGDH01\",\"react_react组件库搭建指南_index.md\":\"DavlhH-3\",\"react_react避坑指南_usecallback_usememo.md\":\"DBJVYTaL\",\"standard_prettier.md\":\"B8zmNcDZ\",\"react_react实战_设计模式与最佳实践_组件设计模式（3）：render props 模式.md\":\"J6wo2neN\",\"standard_git提交规范.md\":\"BY6vFgPF\",\"css3_现代web布局_26.md\":\"BlwKd9DD\",\"react_redux.md\":\"BR83V68G\",\"nodejs_fs-extra文件系统扩展.md\":\"BeGbM1-y\",\"react_react组件库搭建指南_06dumi2.x的使用.md\":\"BovenX8E\",\"tools_github常用技巧.md\":\"DCwuF17j\",\"electron_数据持久缓存方案_electron-store.md\":\"6LHFkhuG\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】.md\":\"BvOBMPMd\",\"nodejs_semantic-release.md\":\"B_4_SZrq\",\"react_react实战_设计模式与最佳实践_组件实践（2）：组件的内部实现.md\":\"pvpT0TG5\",\"typescript_tslib如何使用.md\":\"BsoCW_pQ\",\"react_react实战_设计模式与最佳实践_组件实践（3）：组件化样式.md\":\"DGiADrWs\",\"react_css解决方案_index.md\":\"Q7QSPlYi\",\"typescript_tsdx使用.md\":\"Bcl_A70V\",\"css3_现代web布局_17.md\":\"BCxBKcNP\",\"react_react避坑指南_usestate.md\":\"DK9-NLHJ\",\"electron_react中开发踩坑.md\":\"DpZMxt4e\",\"react_react实战_设计模式与最佳实践_react 的未来（2）：suspense 带来的异步操作革命.md\":\"BLMrhryT\",\"guide_两个跨域页面进行跳转传参的终极方案.md\":\"DrhWeMH4\",\"react_react避坑指南_index.md\":\"DSoRNwmH\",\"react_自定义hooks_useinputhistory.md\":\"BzWdP5Ij\",\"react_ahooks_useeventemitter.md\":\"OluScTeX\",\"react_自定义hooks_usedebounce.md\":\"7ESFZNIZ\",\"electron_dll使用.md\":\"CGmPSJLR\",\"css3_现代web布局_19.md\":\"DIVJU0PC\",\"react_react好用的插件_react-fast-marquee.md\":\"ZhOvpApp\",\"guide_markdown语法.md\":\"BiAJoIJO\",\"nodejs_execa执行外部命令.md\":\"x2fLlbix\",\"nodejs_npkill快速查找删除node_modules.md\":\"CCmNiMZ0\",\"react_ahooks_usefullscreen.md\":\"BkgW8e5k\",\"react_自定义hooks_usesetparticalstate.md\":\"BUv_cnmS\",\"standard_css规范.md\":\"DeHg6jnS\",\"electron_数据持久缓存方案_数据持久缓存库lndb.md\":\"DJUK7UVx\",\"react_自定义组件_如何在react应用中建立错误处理层.md\":\"CNGgmToJ\",\"react_react搞定复杂项目状态管理_index.md\":\"BAj7---e\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第09章 深入infer、ts高级类型、泛型再进阶【全方位深度掌握 ts 泛型】.md\":\"C4bu5mph\",\"tools_idea 注释模板配置.md\":\"0gbuJbd6\",\"electron_基于electron-vite构建react桌面客户端.md\":\"DLOPvG7Q\",\"nodejs_release-it.md\":\"DMPaqLXc\",\"react_react实战_设计模式与最佳实践_react 状态管理（3）：mobx 使用模式.md\":\"Bm7xwY_i\",\"react_ahooks_usehistorytravel.md\":\"DiEJa1G5\",\"css3_现代web布局_21.md\":\"D2PeNBzk\",\"css3_现代web布局_11.md\":\"B10tI7m_\",\"react_antd使用踩坑经验汇总_tree组件.md\":\"CHpE5yvc\",\"electron_electron-builder.md\":\"DNL_pnq4\",\"standard_vue规范.md\":\"DyiLpRai\",\"electron_index.md\":\"BRqk3UrY\",\"react_自定义hooks_userouter.md\":\"LSydLgnY\",\"utils_rxjs.md\":\"C9QQC7cC\",\"standard_codereview代码审查.md\":\"vOhADmqT\",\"react_ahooks_userequest函数.md\":\"erWiB1Ub\",\"react_自定义hooks_usedebouncefn.md\":\"CD-kzD_X\",\"linux_linux常用命令.md\":\"D7RSIp22\",\"standard_commitlint.md\":\"Bc6BHMQJ\",\"react_自定义hooks_uselocationlisten.md\":\"lpoaVI0f\",\"standard_组件封装规范.md\":\"0Ow45yWm\",\"react_自定义hooks_useecharts.md\":\"GJwF9MkV\",\"nodejs_bluebird超高性能的promise库.md\":\"DY98ImvT\",\"react_react避坑指南_useref.md\":\"fBjuCQ9O\",\"electron_electron开发实战_electron环境搭建.md\":\"BaHlrXyB\",\"utils_index.md\":\"mk7T0j55\",\"react_自定义hooks_useevent.md\":\"Comn2-Er\",\"typescript_index.md\":\"Dcw9VPNE\",\"standard_git分支开发规范.md\":\"BIXsyTAc\",\"electron_三方库.md\":\"CAt92F-s\",\"react_react组件库搭建指南_01项目初始化.md\":\"hYE7GWll\",\"react_react好用的插件_jsbarcode.md\":\"CBTRcUAR\",\"electron_electron-react-boilerplate.md\":\"BzWSbABc\",\"react_自定义hooks_usemodal.md\":\"B_XFkn0G\",\"standard_editorconfig.md\":\"D8UrOG7b\",\"tools_git基本使用.md\":\"BvP_0S5g\",\"react_react避坑指南_闭包陷阱.md\":\"zChJGfX2\",\"standard_prettierrc.md\":\"BdHhuL9t\",\"standard_babelrc.md\":\"DxUrlX2l\",\"standard_eslint规范.md\":\"Mu3t4FWn\",\"react_react实战_设计模式与最佳实践_react 状态管理（4）：不同方式对比.md\":\"C3iD1iFV\",\"react_antd使用踩坑经验汇总_index.md\":\"DDsanD1T\",\"tools_yalc本地调试组件库方案.md\":\"BQ3H5AQN\",\"standard_json格式规范.md\":\"B3NuLvz_\",\"electron_配置讲解.md\":\"Bz4ASaED\",\"nodejs_index.md\":\"D6qsbk0v\",\"standard_node_cjs和esm混合开发.md\":\"DedlYZ1u\",\"css3_现代web布局_25.md\":\"DZBc6jqi\",\"standard_stylelint.md\":\"zaLGDP6-\",\"react_自定义hooks_useformmodal.md\":\"DRclMTXI\",\"standard_开源证书.md\":\"CNa1gXoD\",\"react_antd使用踩坑经验汇总_其他弹出层.md\":\"CYvGLZdo\",\"utils_baseinputnumber.md\":\"CCJr66pT\",\"guide_installation.md\":\"Cyna48DO\",\"utils_lodash.md\":\"B_LD-ulc\",\"standard_react规范.md\":\"BDzywc_U\",\"standard_sytlelint.md\":\"BHAGjA08\",\"tools_readme.md自动生成目录.md\":\"Doh9u-Eg\",\"react_自定义hooks_usememo.md\":\"CZgD0tn_\",\"standard_gitignore.md\":\"DGdE7Xq3\",\"react_react避坑指南_useeffect.md\":\"BNAb8N04\",\"nodejs_pkg打包node程序.md\":\"C_mVgg8Y\",\"standard_husky.md\":\"DWpB1fyF\",\"utils_calcutils.md\":\"QyONwp33\",\"tools_index.md\":\"CrRsxT5W\",\"standard_index.md\":\"zy5tYKLI\",\"react_自定义hooks_usemethods.md\":\"CLURCU9f\",\"react_自定义hooks_useloadscript.md\":\"CYcWRvSo\",\"tools_google快捷键.md\":\"mD76rDlK\",\"standard_package.json.md\":\"jsOo3MDQ\",\"standard_前端开发最佳实践总结.md\":\"BGrFiLKW\",\"react_自定义hooks_usesafestate.md\":\"m62ZMP2_\",\"standard_prettierignore.md\":\"VM68Ff5l\",\"react_react实战_设计模式与最佳实践_react 状态管理（2）：redux 使用模式.md\":\"CA0pcV96\",\"utils_mitt.md\":\"DG7F8qQl\",\"standard_gitlab.yml.md\":\"lN9PqoBe\",\"nodejs_minimist命令行参数解析.md\":\"Dx4gEgi2\",\"standard_命名规范.md\":\"DWUPIS4I\",\"react_自定义hooks_usepersistcallback.md\":\"FHXVMyDJ\",\"tools_windows终端优化.md\":\"DANvAyOj\",\"electron_ssl证书.md\":\"Q1dQBluF\",\"react_自定义组件_lazyload.md\":\"B9Bn4iLf\",\"react_自定义组件_keepalive.md\":\"YY9acXG_\",\"tools_常用node库.md\":\"DTeGhNPp\",\"standard_lint-staged.md\":\"DidcSpvQ\",\"css3_现代web布局_20.md\":\"DVP5FwHt\",\"guide_数字相关知识.md\":\"BRzTdbnI\",\"standard_圈复杂度.md\":\"B-UtHNKH\",\"tools_windows快捷键.md\":\"BFgiqO74\",\"standard_ts规范.md\":\"CiDbO0cg\",\"react_antd使用踩坑经验汇总_form表单.md\":\"DGT8jzsZ\",\"react_状态管理_zustand.md\":\"CQAFP37K\",\"react_react好用的插件_react-hook-form.md\":\"BsJSOnXN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"龙陌的博客\",\"description\":\"基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！\",\"base\":\"/long-press/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.ico\",\"nav\":[{\"text\":\"💻 首页\",\"link\":\"/\"},{\"text\":\"💡 指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"🔧 编程工具\",\"link\":\"/tools/\"},{\"text\":\"🔧 常用工具类\",\"link\":\"/utils/\"},{\"text\":\"📋 前端规范\",\"link\":\"/standard/\"},{\"text\":\"⭐ React\",\"link\":\"/react/React实战,设计模式与最佳实践/\"},{\"text\":\"⭐ TypeScript\",\"link\":\"/typescript/\"},{\"text\":\"⭐ Css3\",\"link\":\"/css3/\"},{\"text\":\"⭐ Electron\",\"link\":\"/electron/\"},{\"text\":\"⭐ Linux\",\"link\":\"/linux/linux常用命令\",\"activeMatch\":\"/linux/\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://vitepress.vuejs.org/guide/getting-started\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/248956095\"}],\"footer\":{\"copyright\":\"Copyright © 2024-present Longmo\"},\"sidebar\":{\"/\":[{\"text\":\"开始阅读\",\"collapsed\":false,\"items\":[{\"text\":\"阅读须知\",\"link\":\"/guide\"}]}],\"/tools/\":[{\"collapsed\":false,\"items\":[{\"text\":\"GitHub常用技巧\",\"link\":\"\\\\tools\\\\GitHub常用技巧.md\"},{\"text\":\"Google快捷键\",\"link\":\"\\\\tools\\\\Google快捷键.md\"},{\"text\":\"README.md自动生成目录\",\"link\":\"\\\\tools\\\\README.md自动生成目录.md\"},{\"text\":\"Rollup打包\",\"link\":\"\\\\tools\\\\Rollup打包.md\"},{\"text\":\"Runjs\",\"link\":\"\\\\tools\\\\Runjs.md\"},{\"text\":\"Vscode使用教程\",\"link\":\"\\\\tools\\\\Vscode使用教程.md\"},{\"text\":\"WebStorm快捷键\",\"link\":\"\\\\tools\\\\WebStorm快捷键.md\"},{\"text\":\"Windows快捷键\",\"link\":\"\\\\tools\\\\Windows快捷键.md\"},{\"text\":\"Windows测试IP端口\",\"link\":\"\\\\tools\\\\Windows测试IP端口.md\"},{\"text\":\"Windows终端优化\",\"link\":\"\\\\tools\\\\Windows终端优化.md\"},{\"text\":\"Yalc本地调试组件库方案\",\"link\":\"\\\\tools\\\\Yalc本地调试组件库方案.md\"},{\"text\":\"git基本使用\",\"link\":\"\\\\tools\\\\git基本使用.md\"},{\"text\":\"idea 注释模板配置\",\"link\":\"\\\\tools\\\\idea 注释模板配置.md\"},{\"text\":\"node各类命令\",\"link\":\"\\\\tools\\\\node各类命令.md\"},{\"text\":\"npm镜像源管理工具\",\"link\":\"\\\\tools\\\\npm镜像源管理工具.md\"},{\"text\":\"pnpm多包项目\",\"link\":\"\\\\tools\\\\pnpm多包项目.md\"},{\"text\":\"workspaces核心特性总结\",\"link\":\"\\\\tools\\\\workspaces核心特性总结.md\"},{\"text\":\"依赖镜像地址\",\"link\":\"\\\\tools\\\\依赖镜像地址.md\"},{\"text\":\"常用node库\",\"link\":\"\\\\tools\\\\常用node库.md\"},{\"text\":\"常用命令\",\"link\":\"\\\\tools\\\\常用命令.md\"},{\"text\":\"自动版本管理和生成CHANGELOG\",\"link\":\"\\\\tools\\\\自动版本管理和生成CHANGELOG.md\"},{\"text\":\"规范GIT代码提交信息\",\"link\":\"\\\\tools\\\\规范GIT代码提交信息.md\"},{\"text\":\"资源导航\",\"link\":\"\\\\tools\\\\资源导航.md\"}]}],\"/standard/\":[{\"collapsed\":false,\"items\":[{\"text\":\"CodeReview代码审查\",\"link\":\"\\\\standard\\\\CodeReview代码审查.md\"},{\"text\":\"Css规范\",\"link\":\"\\\\standard\\\\Css规范.md\"},{\"text\":\"Git分支开发规范\",\"link\":\"\\\\standard\\\\Git分支开发规范.md\"},{\"text\":\"Node_CJS和ESM混合开发\",\"link\":\"\\\\standard\\\\Node_CJS和ESM混合开发.md\"},{\"text\":\"React规范\",\"link\":\"\\\\standard\\\\React规范.md\"},{\"text\":\"babelrc\",\"link\":\"\\\\standard\\\\babelrc.md\"},{\"text\":\"commitlint\",\"link\":\"\\\\standard\\\\commitlint.md\"},{\"text\":\"editorconfig\",\"link\":\"\\\\standard\\\\editorconfig.md\"},{\"text\":\"eslint规范\",\"link\":\"\\\\standard\\\\eslint规范.md\"},{\"text\":\"fatherrc.ts配置文件\",\"link\":\"\\\\standard\\\\fatherrc.ts配置文件.md\"},{\"text\":\"gitignore\",\"link\":\"\\\\standard\\\\gitignore.md\"},{\"text\":\"gitlab.yml\",\"link\":\"\\\\standard\\\\gitlab.yml.md\"},{\"text\":\"git提交规范\",\"link\":\"\\\\standard\\\\git提交规范.md\"},{\"text\":\"husky\",\"link\":\"\\\\standard\\\\husky.md\"},{\"text\":\"json格式规范\",\"link\":\"\\\\standard\\\\json格式规范.md\"},{\"text\":\"lint-staged\",\"link\":\"\\\\standard\\\\lint-staged.md\"},{\"text\":\"package.json\",\"link\":\"\\\\standard\\\\package.json.md\"},{\"text\":\"prettier\",\"link\":\"\\\\standard\\\\prettier.md\"},{\"text\":\"prettierignore\",\"link\":\"\\\\standard\\\\prettierignore.md\"},{\"text\":\"prettierrc\",\"link\":\"\\\\standard\\\\prettierrc.md\"},{\"text\":\"pretty-quick\",\"link\":\"\\\\standard\\\\pretty-quick.md\"},{\"text\":\"stylelint\",\"link\":\"\\\\standard\\\\stylelint.md\"},{\"text\":\"sytlelint\",\"link\":\"\\\\standard\\\\sytlelint.md\"},{\"text\":\"tsconfig.json\",\"link\":\"\\\\standard\\\\tsconfig.json.md\"},{\"text\":\"ts规范\",\"link\":\"\\\\standard\\\\ts规范.md\"},{\"text\":\"typings.d.ts\",\"link\":\"\\\\standard\\\\typings.d.ts.md\"},{\"text\":\"vue规范\",\"link\":\"\\\\standard\\\\vue规范.md\"},{\"text\":\"前端开发最佳实践总结\",\"link\":\"\\\\standard\\\\前端开发最佳实践总结.md\"},{\"text\":\"命名规范\",\"link\":\"\\\\standard\\\\命名规范.md\"},{\"text\":\"圈复杂度\",\"link\":\"\\\\standard\\\\圈复杂度.md\"},{\"text\":\"开源证书\",\"link\":\"\\\\standard\\\\开源证书.md\"},{\"text\":\"组件封装规范\",\"link\":\"\\\\standard\\\\组件封装规范.md\"}]}],\"/aHooks/\":[],\"/utils/\":[{\"collapsed\":false,\"items\":[{\"text\":\"BaseInputNumber\",\"link\":\"\\\\utils\\\\BaseInputNumber.md\"},{\"text\":\"calcUtils\",\"link\":\"\\\\utils\\\\calcUtils.md\"},{\"text\":\"lodash\",\"link\":\"\\\\utils\\\\lodash.md\"},{\"text\":\"mitt\",\"link\":\"\\\\utils\\\\mitt.md\"},{\"text\":\"rxjs\",\"link\":\"\\\\utils\\\\rxjs.md\"}]}],\"/guide/\":[{\"text\":\"基础\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"},{\"text\":\"Markdown语法\",\"link\":\"/guide/Markdown语法\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"打包指南\",\"link\":\"/guide/打包指南\"}]}],\"/react/\":{\"base\":\"/react/\",\"items\":[{\"text\":\"React基础\",\"base\":\"/react/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"},{\"text\":\"React Hooks\",\"link\":\"React Hooks\"},{\"text\":\"ReactRouter\",\"link\":\"ReactRouter\"}]},{\"text\":\"Antd使用踩坑经验汇总\",\"base\":\"/react/Antd使用踩坑经验汇总/\",\"items\":[{\"text\":\"Form表单\",\"link\":\"Form表单\"},{\"text\":\"AntdTable表格\",\"link\":\"AntdTable表格\"},{\"text\":\"Tree树组件\",\"link\":\"Tree组件\"},{\"text\":\"其他弹出层\",\"link\":\"其他弹出层\"},{\"text\":\"Tabs选项卡\",\"link\":\"Tabs选项卡\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"}]},{\"text\":\"CSS解决方案\",\"base\":\"/react/CSS解决方案/\",\"items\":[{\"text\":\"CSS Module\",\"link\":\"CSS_Module\"}]},{\"text\":\"ahooks\",\"link\":\"/aHooks/\"},{\"text\":\"自定义Hooks\",\"base\":\"/react/自定义Hooks/\",\"items\":[{\"text\":\"useRouter\",\"link\":\"useRouter\"},{\"text\":\"useLoadScript\",\"link\":\"useLoadScript\"},{\"text\":\"useInputHistory\",\"link\":\"useInputHistory\"},{\"text\":\"useSetParticalState\",\"link\":\"useSetParticalState\"},{\"text\":\"useFormModal\",\"link\":\"useFormModal\"},{\"text\":\"useCopy\",\"link\":\"useCopy\"},{\"text\":\"useIntersection\",\"link\":\"useIntersection\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useInterval\",\"link\":\"useInterval\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useModal\",\"link\":\"useModal\"}]},{\"text\":\"React实战：设计模式和最佳实践\",\"base\":\"/react/React实战,设计模式与最佳实践/\",\"collapsed\":true,\"items\":[{\"text\":\"React的设计思想\",\"link\":\"React的设计思想\"},{\"text\":\"组件实践（1）：如何定义清晰可维护的接口\",\"link\":\"组件实践（1）：如何定义清晰可维护的接口\"},{\"text\":\"组件实践（2）：组件的内部实现\",\"link\":\"组件实践（2）：组件的内部实现\"},{\"text\":\"组件实践（3）：组件化样式\",\"link\":\"组件实践（3）：组件化样式\"},{\"text\":\"组件设计模式（1）：聪明组件和傻瓜组件\",\"link\":\"组件设计模式（1）：聪明组件和傻瓜组件\"},{\"text\":\"组件设计模式（2）：高阶组件\",\"link\":\"组件设计模式（2）：高阶组件\"},{\"text\":\"组件设计模式（3）：render props 模式\",\"link\":\"组件设计模式（3）：render props 模式\"},{\"text\":\"组件设计模式（4）：提供者模式\",\"link\":\"组件设计模式（4）：提供者模式\"},{\"text\":\"组件设计模式（5）：组合组件\",\"link\":\"组件设计模式（5）：组合组件\"},{\"text\":\"React 单元测试\",\"link\":\"React 单元测试\"},{\"text\":\"React 状态管理（1）：组件状态\",\"link\":\"React 状态管理（1）：组件状态\"},{\"text\":\"React 状态管理（2）：Redux 使用模式\",\"link\":\"React 状态管理（2）：Redux 使用模式\"},{\"text\":\"React 状态管理（3）：Mobx 使用模式\",\"link\":\"React 状态管理（3）：Mobx 使用模式\"},{\"text\":\"React 状态管理（4）：不同方式对比\",\"link\":\"React 状态管理（4）：不同方式对比\"},{\"text\":\"路由的魔法：React Router\",\"link\":\"路由的魔法：React Router\"},{\"text\":\"服务器端渲染（1）：基本套路\",\"link\":\"服务器端渲染（1）：基本套路\"},{\"text\":\"服务器端渲染（2):理解Nextjs\",\"link\":\"服务器端渲染（2）理解NextJS\"},{\"text\":\"React 的未来（1）： 拥抱异步渲染\",\"link\":\"React 的未来（1）： 拥抱异步渲染\"},{\"text\":\"React 的未来（2）：Suspense 带来的异步操作革命\",\"link\":\"React 的未来（2）：Suspense 带来的异步操作革命\"},{\"text\":\"React 的未来（3）：函数化的 Hooks\",\"link\":\"React 的未来（3）：函数化的 Hooks\"}]},{\"text\":\"React搞定复杂项目状态管理\",\"base\":\"/react/React搞定复杂项目状态管理/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React后台管理系统项目实战\",\"base\":\"/react/React后台管理系统项目实战/\",\"collapsed\":false,\"items\":[]},{\"text\":\"慕课网最新React技术栈，实战复杂低代码项目-仿问卷星\",\"base\":\"/react/慕课网最新React技术栈，实战复杂低代码项目-仿问卷星/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React状态管理\",\"base\":\"/react/状态管理/\",\"collapsed\":false,\"items\":[{\"text\":\"zustand\",\"link\":\"zustand\"},{\"text\":\"zustand翻译文档\",\"link\":\"zustand翻译文档\"}]},{\"text\":\"开发一个组件库\",\"base\":\"/react/开发一个组件库/\",\"items\":[{\"text\":\"如何完善组件单测\",\"link\":\"如何完善组件单测\"},{\"text\":\"handlebars模板\",\"link\":\"handlebars模板\"}]},{\"text\":\"React好用的插件\",\"base\":\"/react/React好用的插件/\",\"items\":[{\"text\":\"js-pinyin\",\"link\":\"js-pinyin\"},{\"text\":\"jsbarcode\",\"link\":\"jsbarcode\"},{\"text\":\"react-jsx-parse\",\"link\":\"react-jsx-parse\"},{\"text\":\"react-load-script\",\"link\":\"react-load-script\"},{\"text\":\"react-to-print\",\"link\":\"react-to-print\"},{\"text\":\"react-viewer\",\"link\":\"react-viewer\"},{\"text\":\"react-hook-form\",\"link\":\"react-hook-form\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"}]}]},\"/typescript/\":{\"base\":\"/typescript/\",\"items\":[{\"text\":\"TypeScript\",\"base\":\"/typescript/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"}]},{\"text\":\"TS 从入门到深度掌握，晋级TypeScript高手实战课程\",\"base\":\"/typescript/TS 从入门到深度掌握，晋级TypeScript高手实战课程/\",\"collapsed\":false,\"items\":[{\"text\":\"第10章TS声明文件，TS模块.md\",\"link\":\"第10章TS声明文件，TS模块\"}]},{\"text\":\"晋级TypeScript高手，成为抢手的前端开发人才\",\"base\":\"/typescript/晋级TypeScript高手，成为抢手的前端开发人才/\",\"collapsed\":false,\"items\":[{\"text\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\",\"link\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"},{\"text\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\",\"link\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"}]}]},\"/css3/\":{\"base\":\"/css3/\",\"items\":[{\"text\":\"现代web布局\",\"base\":\"/css3/现代web布局/\",\"collapsed\":false,\"items\":[{\"text\":\"Web 布局技术演进：了解 Web 布局发展史\",\"link\":\"01\"},{\"text\":\"现代 Web 布局技术术语\",\"link\":\"02\"},{\"text\":\"Flexbox 布局基础使用\",\"link\":\"03\"},{\"text\":\"Flexbox 布局中的对齐方式\",\"link\":\"04\"},{\"text\":\"Flexbox 布局中的 flex 属性的基础运用\",\"link\":\"05\"},{\"text\":\"Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目\",\"link\":\"06\"},{\"text\":\"Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目\",\"link\":\"07\"},{\"text\":\"Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？\",\"link\":\"08\"},{\"text\":\"使用 Flexbox 构建经典布局：10 种经典 Web 布局\",\"link\":\"09\"},{\"text\":\"10\",\"link\":\"10\"}]},{\"text\":\"postcss\",\"base\":\"/css3/postcss/\",\"collapsed\":false,\"items\":[{\"text\":\"postcss-prefix-selector增加统一作用域\",\"link\":\"postcss-prefix-selector增加统一作用域\"}]}]},\"/electron/\":{\"base\":\"/electron/\",\"items\":[{\"text\":\"electron开发实战\",\"base\":\"/electron/electron开发实战/\",\"collapsed\":false,\"items\":[{\"text\":\"Electron 环境搭建+前期准备\",\"link\":\"electron环境搭建\"},{\"text\":\"开发一个简单版的番茄钟\",\"link\":\"开发一个简单版的番茄钟\"},{\"text\":\"APP特性\",\"link\":\"App特性\"},{\"text\":\"原生GUI\",\"link\":\"原生GUI\"},{\"text\":\"使用NodeJs调用原生模块\",\"link\":\"使用NodeJs调用原生模块\"},{\"text\":\"释放前端想象力\",\"link\":\"释放前端想象力\"},{\"text\":\"Electron优化白屏\",\"link\":\"electron优化白屏\"},{\"text\":\"Electron应用打包\",\"link\":\"electron应用打包\"}]},{\"text\":\"Electron数据持久化方案\",\"base\":\"/electron/数据持久化方案/\",\"collapsed\":false,\"items\":[{\"text\":\"electron-store\",\"link\":\"electron-store\"},{\"text\":\"数据持久缓存库lndb\",\"link\":\"数据持久缓存库lndb\"}]},{\"text\":\"react中开发踩坑\",\"link\":\"/electron/react中开发踩坑\"}]}},\"outline\":{\"level\":[2,6],\"label\":\"本页目录\"},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"lastUpdated\":{\"text\":\"上次更新\"},\"returnToTopLabel\":\"返回顶部\",\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"归档\",\"editLink\":{\"pattern\":\"https://github.com/xxx\",\"text\":\"在 github 上编辑此页\"},\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
    
  </body>
</html>